<template>
  <div class="spotCheck-content-tabs">
    <div class="spotCheck-content-tabs-content">
      <div
        class="spotCheck-content-tabs-content-title spotCheck-content-tabs-content-ac"
      >
        2022年度统计“双随机”抽查
      </div>
      <div class="spotCheck-content-tabs-content-title" v-for="it in 5">
        2022年度统计“双随机”抽查
      </div>
    </div>
    <div class="spotCheck-content-tabs-rig">
      <img
        src="@/assets/imgs/spotCheck/menu1.png"
        @click="setVisible"
        v-if="visible"
      />
      <img src="@/assets/imgs/spotCheck/menu.png" @click="setVisible" v-else />
      <el-button type="primary" @click="spotCheckPlanManagement">抽查计划管理</el-button>
    </div>
    <TabList v-model:visible="visible" />
  </div>
  <div class="spotCheck-content">
    <div class="spotCheck-content-search">
      <el-form
        ref="ruleFormRef"
        :model="form"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
      >
        <el-row :gutter="40" style="width: 100%">
          <el-col :span="6">
            <el-form-item label="检查对象" prop="name">
              <MSelect
                v-model="form.name"
                placeholder="请选择"
                :options="[]"
                class="select"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="组织形式" prop="name">
              <MSelect
                v-model="form.name"
                placeholder="请选择"
                :options="[]"
                class="select"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="抽查时间" prop="name">
              <MSelect
                v-model="form.name"
                placeholder="请选择"
                :options="[]"
                class="select"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="抽查事项" prop="name">
              <MSelect
                v-model="form.name"
                placeholder="请选择"
                :options="[]"
                class="select"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="抽查专家" prop="name">
              <MSelect
                v-model="form.name"
                placeholder="请选择"
                :options="[]"
                class="select"
              />
            </el-form-item>
          </el-col>
          <el-form-item>
            <div style="padding-left: 20px">
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                查询
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </div>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="btns">
      <div>
        <el-button type="primary" @click="AddSpotCheck"> 新增 </el-button>
        <el-button> 批量删除 </el-button>
        <el-button> 批量导入 </el-button>
        <el-button> 模板下载 </el-button>
      </div>
      <div>
        <el-button> 生成台账 </el-button>
        <el-button type="primary" @click="setSpotCheckObjects"> 智能抽查对象管理 </el-button>
      </div>
    </div>
    <div class="list">
      <div
        :class="it === 1 ? 'list-item list-item-ac' : 'list-item'"
        v-for="it in 7"
      >
        <div class="list-header">
          <div class="list-header-left">
            <el-checkbox v-model="it.value" value="check" />
            <span>重庆市云阳县南溪中学校</span>
          </div>
          <div class="list-header-rig">
            <div class="list-header-rig-btn" @click="toView">查看</div>
            <div class="list-header-rig-btn">编辑</div>
            <div class="list-header-rig-btn" @click="toProblemEntry">存在问题</div>
            <div class="list-header-rig-btn">删除</div>
          </div>
        </div>
        <div class="list-content">
          <div class="list-content-item">
            <div>
              <div class="list-content-item-label">检查事项名称</div>
              <div class="list-content-item-tx">民办非企业单位监督检查</div>
            </div>
            <div>
              <div class="list-content-item-label">组织形式</div>
              <div class="list-content-item-tx">实地检查、书面检查</div>
            </div>
            <div>
              <div class="list-content-item-label">抽查专家</div>
              <div class="list-content-item-tx">张三、李四、王五</div>
            </div>
            <div>
              <div class="list-content-item-label">检查时间</div>
              <div class="list-content-item-tx">2024-10-11</div>
            </div>
          </div>
          <div class="list-content-item">
            <div>
              <div class="list-content-item-label">执法检查信息</div>
              <div class="list-content-item-tx">未发现统计违法行为</div>
            </div>
            <div>
              <div class="list-content-item-label">发现问题</div>
              <div class="list-content-item-tx list-content-item-tx-ac">
                5份
              </div>
            </div>
            <div>
              <div class="list-content-item-label">整改通知</div>
              <div class="list-content-item-tx list-content-item-tx-ac">
                重庆市云阳县南溪中学整改通知.jpg
              </div>
            </div>
            <div>
              <div class="list-content-item-label">检查时间</div>
              <div class="list-content-item-tx">2024-10-11</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="m-table__pagination">
      <div class="m-table__pagination__total">
        共 {{ dataTotal }} 条记录 第 {{ params.pageNum }} /
        {{ Math.ceil(dataTotal / params.pageSize) }} 页
      </div>
      <el-pagination
        background
        layout="prev, pager, next, sizes, jumper"
        v-model:currentPage="params.pageNum"
        v-model:page-size="params.pageSize"
        :total="dataTotal"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
  <!-- 抽查计划管理 -->
  <SpotCheckPlan ref="SpotCheckPlanRef" />
  <SpotCheck ref="SpotCheckRef"/>
  <!--抽查对象-->
  <SpotCheckObjectsAbnormal ref="spotCheckObjectsAbnormalRef" />
  <el-dialog
    :width="600"
    v-model="visibale"
    title="抽查对象-风险异常社会组织"
    align-center
  >
    <div class="tip">
      <img src="@/assets/imgs/spotCheck/tip.png" alt="" />
      根据逃税漏税、税务评级、经营异常、财务异常等信息筛选信息
    </div>
    <div class="popup-btns">
      <el-button type="primary" @click="sure" style="width: 140px">生成</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import TabList from '../../components/tabList/tabList.vue'
import MSelect from '@/components/form/src/components/MSelect.vue'
import SpotCheckPlan from '../../components/spotCheckPlanManagement/spotCheckPlanManagement.vue'
import SpotCheck from '../../components/SpotCheck/SpotCheck.vue'
import SpotCheckObjectsAbnormal from '../../components/spotCheckObjectsAbnormal/spotCheckObjectsAbnormal.vue'

const router = useRouter()
const route = useRoute()

defineOptions({
  name: 'SpotCheckPlan'
})

//展开
const visible = ref(false)
const setVisible = () => {
  visible.value = !visible.value
}

//搜索
const form = reactive({
  name: ''
})
const rules = ref({
  name: [{ required: true, message: '请输入', trigger: 'blur' }]
})
//分页
const dataTotal = ref(0)
const params: any = ref({
  pageNum: 1,
  pageSize: 20,
  type: 3,
  queryRange: 0,
  sort: 0,
  timeRange: 0
})

function handleSizeChange() {
  params.value.size = 1
}

//抽查计划管理
const SpotCheckPlanRef = ref()
const spotCheckPlanManagement = () => {
  SpotCheckPlanRef.value.show()
}

//新增抽查
const SpotCheckRef = ref()
const AddSpotCheck = () => {
  SpotCheckRef.value.show()
}

//查看
const toView = () =>{
  router.push({
    name: 'SpotCheckView'
  })
}

//存在的问题
const toProblemEntry = () => {
  router.push({
    name: 'spotCheckProblemEntry'
  })
}

//抽查对象
const spotCheckObjectsAbnormalRef = ref(false)
const setSpotCheckObjects = () => {
  visibale.value = true
}

const visibale = ref(false)
const sure = () => {
  visibale.value = false
  spotCheckObjectsAbnormalRef.value.show()
}
</script>
<style lang="scss" scoped>
.spotCheck-content {
  width: 100%;
  min-height: 500px;
  &-search {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 30px;
  }
}
.spotCheck-header-tabs {
  height: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #e9e9e9;
  &-items {
    height: 100%;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 24px 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 400;
    font-size: 18px;
    color: #666666;
    cursor: pointer;
    border-right: 1px solid #e9e9e9;
  }
  &-items:last-child {
    border-right: unset;
  }
  &-items:hover {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 500;
    font-size: 18px;
    color: #1c85ff;
    position: relative;
  }
  &-items:hover::after {
    content: '';
    width: 100%;
    height: 4px;
    background: #1c85ff;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
  }
  &-items-ac {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 500;
    font-size: 18px;
    color: #1c85ff;
    font-weight: 500;
    position: relative;
  }
  &-items-ac::after {
    content: '';
    width: 100%;
    height: 4px;
    background: #1c85ff;
    border-radius: 0px 0px 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.spotCheck-content-tabs {
  width: 100%;
  height: 70px;
  display: flex;
  border: 1px solid #e9e9e9;
  position: relative;
  &-content {
    flex: 1;
    height: 100%;
    box-sizing: border-box;

    display: flex;
    justify-content: space-around;
    align-items: center;
    &-title {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 18px;
      color: #666666;
      margin-top: 15px;
      cursor: pointer;
    }
    &-ac {
      font-weight: 500;
      font-size: 18px;
      color: #333333;
      position: relative;
    }
    &-ac::after {
      content: '';
      height: 4px;
      width: 60%;
      position: absolute;
      bottom: -17px;
      right: 0;
      left: 0;
      margin: auto;
      background: #1c85ff;
      border-radius: 0px 0px 0px 0px;
    }
  }
  &-rig {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 26px;
      height: 26px;
      margin-right: 20px;
      cursor: pointer;
    }
  }
}
.select {
  width: 100%;
}
.btns {
  width: 100%;
  box-sizing: border-box;
  padding: 30px;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list {
  width: 100%;
  box-sizing: border-box;
  padding: 0 30px;
  .list-item {
    width: 100%;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #e9e9e9;
    padding: 0 24px;
    box-sizing: border-box;
    margin-bottom: 20px;
    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 0;
      border-bottom: 1px solid #e9e9e9;
      margin-bottom: 20px;
      .list-header-left {
        display: flex;
        align-items: center;
        span {
          font-weight: bold;
          font-size: 18px;
          color: #333333;
          margin-left: 10px;
        }
      }
      .list-header-rig {
        display: flex;
        .list-header-rig-btn {
          font-weight: 300;
          font-size: 16px;
          color: #333333;
          padding: 0 21px;
          position: relative;
          cursor: pointer;
        }
        .list-header-rig-btn::after {
          content: '';
          width: 0;
          height: 20px;
          border: 1px solid #e9e9e9;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto;
        }
        .list-header-rig-btn:last-child {
          padding-right: 0;
        }
        .list-header-rig-btn:last-child::after {
          height: 0;
        }
      }
    }
    .list-content {
      width: 100%;
      padding-bottom: 24px;
      .list-content-item {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
        & > div {
          display: flex;
          flex-wrap: wrap;
          margin-right: 120px;
          .list-content-item-label {
            font-weight: 400;
            font-size: 18px;
            color: #999999;
            margin-right: 20px;
          }
          .list-content-item-tx {
            font-weight: 400;
            font-size: 18px;
            color: #666666;
          }
          .list-content-item-tx-ac {
            font-weight: 400;
            font-size: 18px;
            color: #1763bc;
          }
        }
      }
      .list-content-item:last-child {
        margin-bottom: 0;
      }
    }
  }
  .list-item-ac {
    background: #f9fbfe;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #e2ecfc;
  }
}
.m-table__pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px 30px 30px;
  box-sizing: border-box;
  &__total {
    color: #0000006d;
  }
}
.tip {
  width: 100%;
  height: 34px;
  background: #f5f6f8;
  border-radius: 0px 0px 0px 0px;
  display: inline-flex;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-left: 20px;
  }
}
.popup-btns {
  display: flex;
  justify-content: center;
  padding: 30px 0 0;
}
</style>
